<script setup>

/**
 * @import libs
 */
import { storeToRefs } from 'pinia'

/**
 * @import pinia stores
 */

//pinia -> usePetDoctorPageStore
import { usePetDoctorPageStore } from '@/stores/petDoctor/petDoctorPage.js'

/**
 * @param redeemCodePlaceholder 兑换码输入框占位内容
 * @param redeemCodeValue 兑换码输入框内容
 */
let { redeemCodePlaceholder, redeemCodeValue } = storeToRefs(usePetDoctorPageStore())

/**
 * @function checkRedeemCode 验证兑换码内容
 */
const { checkRedeemCode } = usePetDoctorPageStore()

/**
 * 输入框输入事件
 * @param e 输入框输入事件
 * @returns {*}
 */
const inputEvent = (e) => {

    let value = e?.detail?.value//输入框内容

    //判断数据是否存在
    if (value === undefined) {
        return
    }

    //判断类型是否为string
    if (typeof value !== 'string') {
        console.error('value is not a string')
        return
    }

    checkRedeemCode(value)
}

</script>

<template>
    <div class="redeem-code">
        <input class="input-class" placeholder-style="color:#fff" v-model="redeemCodeValue"
            :placeholder="redeemCodePlaceholder" placeholder-class="input-placeholder" @input="inputEvent" />
    </div>
</template>

<style scoped>

.redeem-code {
    width: 550rpx;
    height: 100rpx;
    background-color: #efb87a;
    line-height: 100rpx;
    border-radius: 40rpx;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3.5vh;
}

.input-class {
    text-align: center;
    color: aliceblue;
    font-family: 'Microsoft YaHei';
    font-size: 35rpx;
}
</style>